{% extends "base.html" %}

{% block title %}线索管理 - 线索转化{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-6">
    <!-- 面包屑导航 -->
    <nav class="flex mb-6" aria-label="Breadcrumb">
        <ol class="inline-flex items-center space-x-1 md:space-x-3">
            <li class="inline-flex items-center">
                <a href="{{ url_for('main.home') }}" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-primary">
                    <i class="fas fa-home mr-2"></i>
                    首页
                </a>
            </li>
            <li>
                <div class="flex items-center">
                    <i class="fas fa-chevron-right text-gray-400 mx-2"></i>
                    <a href="{{ url_for('lead.lead_list') }}" class="text-sm font-medium text-gray-700 hover:text-primary">线索管理</a>
                </div>
            </li>
            <li>
                <div class="flex items-center">
                    <i class="fas fa-chevron-right text-gray-400 mx-2"></i>
                    <a href="{{ url_for('lead.lead_detail', lead_id=lead.id) }}" class="text-sm font-medium text-gray-700 hover:text-primary">线索详情</a>
                </div>
            </li>
            <li>
                <div class="flex items-center">
                    <i class="fas fa-chevron-right text-gray-400 mx-2"></i>
                    <span class="text-sm font-medium text-gray-500">线索转化</span>
                </div>
            </li>
        </ol>
    </nav>

    <!-- 页面标题 -->
    <div class="mb-6">
        <h1 class="text-2xl font-bold text-gray-900">将销售线索转化为客户</h1>
        <p class="mt-2 text-sm text-gray-600">将销售线索 "{{ lead.name }}" 转化为正式客户</p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- 左侧：线索信息 -->
        <div class="lg:col-span-1">
            <div class="bg-white rounded-lg shadow">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-medium text-gray-900">线索信息</h3>
                </div>
                <div class="p-6">
                    <div class="space-y-4">
                        <div>
                            <h4 class="text-sm font-medium text-gray-500">线索名称</h4>
                            <p class="mt-1 text-sm text-gray-900">{{ lead.name }}</p>
                        </div>
                        <div>
                            <h4 class="text-sm font-medium text-gray-500">公司名称</h4>
                            <p class="mt-1 text-sm text-gray-900">{{ lead.company or '无' }}</p>
                        </div>
                        <div>
                            <h4 class="text-sm font-medium text-gray-500">联系电话</h4>
                            <p class="mt-1 text-sm text-gray-900">{{ lead.phone }}</p>
                        </div>
                        <div>
                            <h4 class="text-sm font-medium text-gray-500">电子邮箱</h4>
                            <p class="mt-1 text-sm text-gray-900">{{ lead.email or '无' }}</p>
                        </div>
                        <div>
                            <h4 class="text-sm font-medium text-gray-500">线索来源</h4>
                            <p class="mt-1 text-sm text-gray-900">{{ lead.source }}</p>
                        </div>
                        <div>
                            <h4 class="text-sm font-medium text-gray-500">线索评分</h4>
                            <p class="mt-1 text-sm text-gray-900">{{ lead.score or '0' }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 右侧：转化表单 -->
        <div class="lg:col-span-2">
            <div class="bg-white rounded-lg shadow">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-medium text-gray-900">客户信息</h3>
                </div>
                <form method="post" action="{{ url_for('lead.lead_convert', lead_id=lead.id) }">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <div class="p-6 space-y-6">
                        <!-- 基本信息 -->
                        <div>
                            <h4 class="text-md font-medium text-gray-900 mb-4">基本信息</h4>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <label for="customer_number" class="block text-sm font-medium text-gray-700">客户编号</label>
                                    <input type="text" name="customer_number" id="customer_number" required
                                           class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm"
                                           value="CUST-{{ '0' * (6 - (lead.id|string|length)) }}{{ lead.id }}">
                                </div>
                                <div>
                                    <label for="name" class="block text-sm font-medium text-gray-700">客户名称</label>
                                    <input type="text" name="name" id="name" required
                                           class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm"
                                           value="{{ lead.company if lead.company else lead.name }}">
                                </div>
                                <div>
                                    <label for="source" class="block text-sm font-medium text-gray-700">客户来源</label>
                                    <select name="source" id="source" disabled
                                            class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm bg-gray-50">
                                        <option value="{{ lead.source }}" selected>{{ lead.source }}</option>
                                    </select>
                                    <p class="mt-1 text-xs text-gray-500">客户来源将继承自线索来源</p>
                                </div>
                                <div>
                                    <label for="industry" class="block text-sm font-medium text-gray-700">所属行业</label>
                                    <select name="industry" id="industry"
                                            class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm">
                                        <option value="IT" {% if lead.industry == 'IT' %}selected{% endif %}>IT</option>
                                        <option value="金融" {% if lead.industry == '金融' %}selected{% endif %}>金融</option>
                                        <option value="制造" {% if lead.industry == '制造' %}selected{% endif %}>制造</option>
                                        <option value="教育" {% if lead.industry == '教育' %}selected{% endif %}>教育</option>
                                        <option value="医疗" {% if lead.industry == '医疗' %}selected{% endif %}>医疗</option>
                                        <option value="其他" {% if lead.industry == '其他' %}selected{% endif %}>其他</option>
                                    </select>
                                </div>
                                <div>
                                    <label for="scale" class="block text-sm font-medium text-gray-700">客户规模</label>
                                    <select name="scale" id="scale"
                                            class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm">
                                        <option value="大型">大型</option>
                                        <option value="中型" selected>中型</option>
                                        <option value="小型">小型</option>
                                        <option value="微型">微型</option>
                                    </select>
                                </div>
                                <div>
                                    <label for="type" class="block text-sm font-medium text-gray-700">客户类型</label>
                                    <select name="type" id="type"
                                            class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm">
                                        <option value="潜在客户">潜在客户</option>
                                        <option value="意向客户" selected>意向客户</option>
                                        <option value="成交客户">成交客户</option>
                                        <option value="流失客户">流失客户</option>
                                    </select>
                                </div>
                                <div>
                                    <label for="status" class="block text-sm font-medium text-gray-700">客户状态</label>
                                    <select name="status" id="status"
                                            class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm">
                                        <option value="活跃" selected>活跃</option>
                                        <option value="休眠">休眠</option>
                                        <option value="流失">流失</option>
                                    </select>
                                </div>
                                <div>
                                    <label for="manager_id" class="block text-sm font-medium text-gray-700">负责人</label>
                                    <select name="manager_id" id="manager_id"
                                            class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm">
                                        {% for user in users %}
                                        <option value="{{ user.id }}" {% if user.id == (lead.assigned_to or session.get('user_id')) %}selected{% endif %}>{{ user.name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                        </div>

                        <!-- 联系信息 -->
                        <div>
                            <h4 class="text-md font-medium text-gray-900 mb-4">联系信息</h4>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <label for="contact_name" class="block text-sm font-medium text-gray-700">联系人</label>
                                    <input type="text" name="contact_name" id="contact_name" required
                                           class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm"
                                           value="{{ lead.name }}">
                                </div>
                                <div>
                                    <label for="contact_position" class="block text-sm font-medium text-gray-700">职位</label>
                                    <input type="text" name="contact_position" id="contact_position"
                                           class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm"
                                           value="{{ lead.position or '' }}">
                                </div>
                                <div>
                                    <label for="contact_phone" class="block text-sm font-medium text-gray-700">联系电话</label>
                                    <input type="text" name="contact_phone" id="contact_phone" required
                                           class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm"
                                           value="{{ lead.phone }}">
                                </div>
                                <div>
                                    <label for="contact_email" class="block text-sm font-medium text-gray-700">电子邮箱</label>
                                    <input type="email" name="contact_email" id="contact_email"
                                           class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm"
                                           value="{{ lead.email or '' }}">
                                </div>
                            </div>
                        </div>

                        <!-- 转化信息 -->
                        <div>
                            <h4 class="text-md font-medium text-gray-900 mb-4">转化信息</h4>
                            <div class="grid grid-cols-1 gap-6">
                                <div>
                                    <label for="conversion_reason" class="block text-sm font-medium text-gray-700">转化原因</label>
                                    <textarea name="conversion_reason" id="conversion_reason" rows="3" required
                                              class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm"
                                              placeholder="请简要说明转化原因，如：客户有明确采购意向、已确定预算等"></textarea>
                                </div>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                    <div>
                                        <label for="estimated_amount" class="block text-sm font-medium text-gray-700">预估金额（元）</label>
                                        <input type="number" name="estimated_amount" id="estimated_amount" step="0.01" min="0"
                                               class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm"
                                               value="{{ lead.estimated_amount or '' }}">
                                    </div>
                                    <div>
                                        <label for="estimated_close_date" class="block text-sm font-medium text-gray-700">预估成交日期</label>
                                        <input type="date" name="estimated_close_date" id="estimated_close_date"
                                               class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm"
                                               value="{{ lead.estimated_close_date or '' }}">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 其他信息 -->
                        <div>
                            <h4 class="text-md font-medium text-gray-900 mb-4">其他信息</h4>
                            <div class="grid grid-cols-1 gap-6">
                                <div>
                                    <label for="address" class="block text-sm font-medium text-gray-700">客户地址</label>
                                    <textarea name="address" id="address" rows="2"
                                              class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm"
                                              placeholder="请输入客户地址"></textarea>
                                </div>
                                <div>
                                    <label for="remarks" class="block text-sm font-medium text-gray-700">备注</label>
                                    <textarea name="remarks" id="remarks" rows="3"
                                              class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm"
                                              placeholder="请输入备注信息"></textarea>
                                </div>
                            </div>
                        </div>

                        <!-- 提交按钮 -->
                        <div class="flex justify-end space-x-3">
                            <a href="{{ url_for('lead.lead_detail', lead_id=lead.id) }}" class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                                取消
                            </a>
                            <button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-blue-700">
                                <i class="fas fa-exchange-alt mr-2"></i>
                                转化为客户
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}